<template>
  <div class="widget">
    <p class="widget-title">{{ content.display_name }}</p>
    <el-button icon="el-icon-plus" @click="showDialog">选择文件</el-button>
    <p class="widget-hint">{{ this.content.defaultValue }}</p>
    <el-dialog title=" " :visible.sync="showFile">
      <div class="breadcrumb">
        <span v-for="(e, i) in paths" :key="i">

          <el-button type="text" @click="goLevel(e, i)">{{ e.name }}</el-button>
          {{ `${i != paths.length - 1 ? '/' : ''}` }}
        </span>
      </div>
      <el-table :data="tableData">
        <el-table-column prop="name" label="名称">
          <template slot-scope="{ row }">
            <span @dblclick="goPath($event, row)">
              <!-- {{ row.name }} -->
              <span @click="preview(row)" :class="['name-icon', handleClass(row)]">{{ row.name }}</span>
            </span>
            <!-- <span @click="preview(row)">{{ row.name }}</span> -->
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="文件大小" prop="size">
          <template slot-scope="{ row }">{{
            formatFileSize(row)
          }}</template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="修改时间" prop="modify_time" />
        <!-- <el-table-column label="操作" width="120px" align="center" header-align="center">
          <template slot-scope="{ row }">
            <el-button type="text" @click="download(row)">下载</el-button>
            <el-button type="text" @click="del(row)">删除</el-button>
          </template>
        </el-table-column> -->

      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitReject">确认</el-button>
        <el-button @click="showFile = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { zipFormat, mediaFormat } from "@/utils/maps";
import { getPageFileList } from "@/api/file";

export default {
  props: {},
  data() {
    return {
      content: {},
      showFile: false,
      biz_id: '',
      myInfo: {},
      tableData: [],
      Pagedata: {},
      paths: [{
        name: 'workspace',
        relative_path: ''
      }],
      relative_path: '',
    };
  },
  methods: {
    async initParam(relative_path) {
      this.myInfo = await this.$myInfo(this)
      this.Pagedata = {
        biz_id: this.biz_id,
        is_public: this.is_public,
        relative_path,
        type: 'workspace',
        user_id: this.myInfo.id,
        page_num: 1,
        page_size: 100,
      }
      return
    },
    async getData() {
      let res = await getPageFileList(this.Pagedata)
      // let res2 = await getFileList(this.Pagedata)
      // console.log(res2)
      console.log(res)
      this.tableData = res.data.list
      this.Pagedata.total = res.data.total
    },
    goPath($event, { dir, name, path }) {
      $event.stopPropagation()
      if (!dir) return
      this.Pagedata.relative_path = path.split(this.biz_id)[1]
      this.paths.push({
        name,
        relative_path: path.split(this.biz_id)[1]
      })
      this.getData()
    },
    goLevel(e, i) {
      this.Pagedata.relative_path = e.relative_path
      this.paths.splice(i + 1)
      this.getData()
    },
    preview(row) {
      let replacePath = `/platform/${this.myInfo.id}/workspace/${this.content.canvas_id}`
      this.content.defaultValue = row.path.replace(replacePath, '.')
      this.showFile = false
    },
    handleClass({ dir, suffix }) {
      if (dir) return "dir";
      if (zipFormat[suffix]) return "zip";
      if (mediaFormat[suffix]) return mediaFormat[suffix]
      return "text";
    },
    formatFileSize({ size, dir }) {
      if (dir) {
        return '-'
      }
      if (size < 1024) {
        return size + "B";
      } else if (size < 1024 * 1024) {
        let temp = size / 1024;
        temp = temp.toFixed(2);
        return temp + "KB";
      } else if (size < 1024 * 1024 * 1024) {
        let temp = size / (1024 * 1024);
        temp = temp.toFixed(2);
        return temp + "MB";
      } else {
        let temp = size / (1024 * 1024 * 1024);
        temp = temp.toFixed(2);
        return temp + "GB";
      }
    },
    showDialog() {
      this.showFile = true
      // let canvas_id = this.$route.query.canvas_id
      // let canvas_id = this.content.canvas_id
      // this.list(canvas_id, 'workspace', canvas_id)
      this.getData()
    },
    submitReject() {

    }
  },
  async mounted() {
    this.biz_id = this.content.canvas_id
    await this.initParam(this.relative_path)
    // this.getData()
  }
};
</script>

<style lang="less" scoped>
.name-icon {
  padding-left: 28px;
  cursor: pointer;
  background: url(~@/assets/img/file-icon/text.png) no-repeat;
  background-position: left center !important;
  background-size: 22px 22px;
  width: 100%;
  // height: 22px;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: flex;
}

.dir {
  background: url(~@/assets/img/file-icon/dir.png) no-repeat;
  background-size: 22px 22px;
}

.zip {
  background: url(~@/assets/img/file-icon/zip.png) no-repeat;
  background-size: 22px 22px;
}

.pic {
  background: url(~@/assets/img/file-icon/pic.png) no-repeat;
  background-size: 22px 22px;
}

.video {
  background: url(~@/assets/img/file-icon/video.png) no-repeat;
  background-size: 22px 22px;
}

.voice {
  background: url(~@/assets/img/file-icon/voice.png) no-repeat;
  background-size: 22px 22px;
}
</style>
